<template>
	<view class="custom-poster">
		<uni-notice-bar v-show="!isShare" show-icon scrollable color="#c80802" background-color="#FCF3F2"
			text="请在文案处修改内容,修改完毕后点击生成定制祝福转发定制海报" />
		<!-- 主题一 -->
		<view class="poster-box" :class="{'noMargin': isShare}" v-if="theme == '主题一'">
			<image class="poster-img" :src="cur_edit_theme_src" mode="widthFix"></image>
			<input class="name-input" :disabled="isShare" v-model="name" maxlength="15" type="text"
				placeholder-class="placeholderStyle">
			<textarea class="content-textarea" :disabled="isShare" v-model="content" maxlength="78"
				placeholder-class="placeholderStyle"></textarea>
			<!-- 落款人 -->
			<input class="bottom-person-input" :disabled="isShare" v-model="shopName" type="text" maxlength="15"
				placeholder-class="placeholderStyle">
			<!-- 日期 -->
			<input class="bottom-date-input" :disabled="isShare" v-model="date" maxlength="15" type="text"
				placeholder-class="placeholderStyle">
		</view>

		<!-- 主题二 -->
		<view class="poster-box" :class="{'noMargin': isShare}" v-else-if="theme == '主题二'">
			<image class="poster-img" :src="cur_edit_theme_src" mode="widthFix"></image>
			<!-- 上传图片 -->
			<view class="detail-tally-imgs">
				<view class="grid-item-box" :key="index" @tap.stop="ViewImage()" v-if="!isShare">
					<image :src="posterImg" class="tally-img" mode="aspectFill" />
					<van-icon class="delete-icon" name="clear" v-show="!isAddImgShow" @tap.stop="DelImg()" />
				</view>
				<view class="grid-item-box" :key="index" v-else>
					<image :src="posterImg" class="tally-img" mode="aspectFill" />
				</view>
				<view class="grid-item-box detail-tally-img-add" v-show="isAddImgShow && !isShare"
					@tap.stop="ChooseImage">
					<van-icon class="add-icon" name="plus" />
					<text class="add-text">上传新春拜年照片</text>
				</view>
			</view>
			<image class="denglong-left" src="https://biapi.vaubang.cn/UploadFiles/Images/newYear/denglong-left.png"
				mode="widthFix"></image>
			<image class="denglong-right" src="https://biapi.vaubang.cn/UploadFiles/Images/newYear/denglong-right.png"
				mode="widthFix"></image>
			<input class="name-input theme-2" :disabled="isShare" v-model="themeName2" maxlength="18" type="text"
				placeholder-class="placeholderStyle">
			<textarea class="content-textarea theme-2" :disabled="isShare" v-model="themeContent2" maxlength="35"
				placeholder-class="placeholderStyle"></textarea>
		</view>

		<!-- 主题三 -->
		<view class="poster-box" :class="{'noMargin': isShare}" v-else-if="theme == '主题三'">
			<image class="poster-img" :src="cur_edit_theme_src" mode="widthFix"></image>
			<input class="name-input theme-3" :disabled="isShare" v-model="themeName3" maxlength="20" type="text"
				placeholder-class="placeholderStyle">
			<input class="name-input theme-content-3" :disabled="isShare" v-model="themeContent3" maxlength="20"
				type="text" placeholder-class="placeholderStyle">
			<!-- 电话 -->
			<input class="bottom-person-input-theme-3" :disabled="isShare" v-model="phone" type="text" maxlength="30"
				placeholder-class="placeholderStyle">
			<!-- 地址 -->
			<input class="bottom-date-input-theme-3" :disabled="isShare" v-model="address" maxlength="30" type="text"
				placeholder-class="placeholderStyle">
		</view>

		<view class="custom-item" v-if="!isShare">
			<view class="title">
				<text>分享标题</text>
				<text class="example" @click="handleWatchExample">查看示例效果</text>
			</view>

			<input class="custom-input" v-model="shareTitle" type="text" placeholder="例如:辞岁迎新，兔年来到，福兔祝您鸿福齐天，万事如意！"
				placeholder-class="placeholder-style">
		</view>

		<!-- 新年浮窗 -->
		<image class="floating-w" v-if="isShare && floatingShow" @click="handleCustomNewYear"
			src="https://biapi.vaubang.cn/UploadFiles/Images/newYear/floating-w.png" mode="widthFix"></image>
		<image class="floating-h" v-else-if="isShare && !floatingShow"
			src="https://biapi.vaubang.cn/UploadFiles/Images/newYear/floating-h.png" mode="heightFix"
			@click="handleCustomNewYear"></image>


		<button class="submit-btn" v-if="!isShare" open-type="share">生成定制祝福</button>
		<!-- <button class="share-box" v-else @click="handleCustomNewYear">制<br />作<br />新<br />年<br />祝<br />福</button> -->

		<button class="custom-btn" v-if="isShare" @click="handleCustomNewYear">我也要制作新年祝福</button>
		<button class="submit-btn" v-if="isShare" open-type="share">转发分享</button>
		<view class="height"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				floatingShow: true,
				shareTitle: "",
				theme: "",
				isShare: false,
				cur_edit_theme_src: "",
				themeImgW: 0,
				themeImgH: 0,
				name: "致敬爱的您",
				content: "虎越难关，兔临春境。岁末将至，敬颂冬绥。别样的一年已成过去，能够挽留住的，唯有对您最为由衷的新年祝福。愿所有美好如约而至！新年快乐！",
				shopName: "长沙xxx店",
				date: "1月21日",
				posterImg: "",
				isAddImgShow: true,
				themeName2: "我司全体员工恭祝您",
				themeContent2: "兔年大吉，万事如意，新年快乐！",
				themeName3: "我司全体员工恭祝您",
				themeContent3: "兔年大吉，身体健康，万事如意！",
				phone: "联系电话：0731-88888888",
				address: "地址：xx市xx区xx路xxx号",
			}
		},
		onLoad(options) {
			console.log('options', options);
			let that = this;
			setTimeout(() => {
				that.floatingShow = false;
			}, 2000)
			let {
				themeId,
				isShare,
				name,
				content,
				shopName,
				date,
				posterImg,
				themeName2,
				themeContent2,
				themeName3,
				themeContent3,
				phone,
				address,
			} = options;
			let theme = themeId;
			this.theme = theme;
			// if (this.shareTitle == "") {
			// 	this.shareTitle = "兔年来到，福兔祝您鸿福齐天，万事如意";
			// }
			if (isShare == true || isShare == 'true') {
				this.isShare = isShare;
				switch (theme) {
					case '主题一':
						this.name = name || "致敬爱的您"
						this.content = content || "虎越难关，兔临春境。岁末将至，敬颂冬绥。别样的一年已成过去，能够挽留住的，唯有对您最为由衷的新年祝福。愿所有美好如约而至！新年快乐！"
						this.shopName = shopName || ""
						this.date = date || ""
						break;
					case '主题二':
						this.posterImg = posterImg || ""
						this.themeName2 = themeName2 || "我司全体员工恭祝您"
						this.themeContent2 = themeContent2 || "兔年大吉，万事如意，新年快乐！"
						break;
					case '主题三':
						this.themeName3 = themeName3 || "我司全体员工恭祝您"
						this.themeContent3 = themeContent3 || "兔年大吉，身体健康，万事如意！"
						this.phone = phone || "联系电话：0731-88888888"
						this.address = address || "地址：xx市xx区xx路xxx号"
						break;
				}
			}
			if (theme == '主题一') {
				this.cur_edit_theme_src = "https://biapi.vaubang.cn/UploadFiles/Images/newYear/new-year-theme-edit-1.png";
			} else if (theme == '主题二') {
				this.cur_edit_theme_src = "https://biapi.vaubang.cn/UploadFiles/Images/newYear/new-year-theme-edit-2.png";
			} else if (theme == '主题三') {
				this.cur_edit_theme_src = "https://biapi.vaubang.cn/UploadFiles/Images/newYear/new-year-theme-edit-3.png";
			}
			console.log(this.cur_edit_theme_src);
		},
		methods: {
			// 查看示例效果
			handleWatchExample() {
				var dataArray = ["https://biapi.vaubang.cn/UploadFiles/Images/newYear/new-year-share.png"];
				uni.previewImage({
					urls: dataArray,
					current: "https://biapi.vaubang.cn/UploadFiles/Images/newYear/new-year-share.png"
				});
			},
			// 制作新年祝福
			handleCustomNewYear() {
				uni.navigateTo({
					url: "/packageC/new-year/custom-new-year"
				})
			},
			// 上传图片
			ChooseImage(index) {
				let loginInfo = uni.getStorageSync("loginInfo");
				var that = this;
				uni.chooseImage({
					count: 1, //默认最多上传6张图片
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						that.isAddImgShow = false;

						getApp().showLoading();
						uni.uploadFile({
							url: getApp().globalData.websiteUrl + "/api/v1/FileUpload",
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'fileType': 'Other'
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
								let res = JSON.parse(uploadFileRes.data);
								let filePath = res.data[0].filePath;
								let newFilePath = filePath.replace(/\\/g, "/");
								let completedPath =
									`${getApp().globalData.websiteUrl}${newFilePath}/${res.data[0].fileName}`;
								console.log('completedPath', completedPath);
								that.posterImg = completedPath;
							}
						});

					}
				});
			},
			// 预览图片
			ViewImage() {
				console.log('点击了预览');
				let posterImg = this.posterImg;
				var dataArray = [posterImg];
				uni.previewImage({
					urls: dataArray,
					current: posterImg
				});
			},
			// 删除图片
			DelImg(index) {
				this.isAddImgShow = true;
				this.posterImg = "";
			},
			// 分享当前用户已完成点检内容给好友
			onShareAppMessage() {
				return this.getShareData();
			},
			getShareData() {
				let title = this.shareTitle ? this.shareTitle : "辞岁迎新，兔年来到，福兔祝您鸿福齐天，万事如意！";
				let imageUrl = "https://biapi.vaubang.cn/UploadFiles/Images/newYear/share-cover.png";
				let path = "";
				if (this.theme == '主题一') {
					path =
						`/packageC/new-year/custom-poster?themeId=${this.theme}&isShare=true&name=${this.name}&content=${this.content}&shopName=${this.shopName}&date=${this.date}`;
				} else if (this.theme == '主题二') {
					path =
						`/packageC/new-year/custom-poster?themeId=${this.theme}&isShare=true&themeName2=${this.themeName2}&themeContent2=${this.themeContent2}&posterImg=${this.posterImg}`;
				} else if (this.theme == '主题三') {
					path =
						`/packageC/new-year/custom-poster?themeId=${this.theme}&isShare=true&themeName3=${this.themeName3}&themeContent3=${this.themeContent3}&phone=${this.phone}&address=${this.address}`;
				}
				console.log('path', path);
				return {
					title,
					imageUrl,
					path
				};
			},

		},
	}
</script>

<style lang="less">
	.custom-poster {
		.height {
			height: 60rpx;
		}

		.floating-w {
			position: fixed;
			right: 5px;
			bottom: 100px;
			z-index: 99;
			width: 80px;
			height: 67px;
			transition: all 0.5s linear;
		}

		.floating-h {
			position: fixed;
			right: 2px;
			bottom: 140px;
			width: 45px;
			height: 140px;
			transition: all 0.5s linear;
			z-index: 99;
		}

		.poster-box {
			width: 100%;
			height: 100%;
			margin-top: 20rpx;
			position: relative;
			z-index: 11;

			.denglong-left {
				width: 400rpx;
				height: 646rpx;
				position: absolute;
				left: -256rpx;
				top: 340rpx;
			}

			.denglong-right {
				width: 340rpx;
				position: absolute;
				right: -196rpx;
				top: 340rpx;
			}

			.detail-tally-imgs {
				background-color: transparent;
				position: absolute;
				top: 440rpx;
				left: 0;
				width: 100%;
				height: 424rpx;

				.grid-item-box {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;

					.add-icon {
						position: absolute;
						left: 50%;
						margin-left: -45rpx;
						top: 140rpx;
						font-size: 90rpx;
						color: #d0d0d0;
					}

					.add-text {
						position: absolute;
						font-size: 13px;
						color: #d0d0d0;
						top: 250rpx;
						width: 100%;
						text-align: center;
						font-weight: 500;
					}

					.tally-img {
						width: 100%;
						height: 100%;
					}

					.delete-icon {
						position: absolute;
						top: -20rpx;
						right: 20rpx;
						color: #FF1010;
						background-color: #fff;
						font-size: 22px;
						border-radius: 50%;
						z-index: 99;
					}
				}
			}

			&.noMargin {
				margin-top: 0;
			}

			.poster-img {
				width: 100%;
				height: 100%;
			}

			.name-input {
				width: 320rpx;
				height: 60rpx;
				position: absolute;
				left: 160rpx;
				top: 620rpx;
				background-color: transparent;
				font-size: 26rpx;
				color: #AF6D33;
				font-weight: 600;

				&.theme-2 {
					top: 910rpx;
					left: 40rpx;
					right: 40rpx;
					width: auto;
					height: 72rpx;
					font-size: 32rpx;
					text-align: center;
					color: #FFD88C;
					font-weight: 500;
				}

				&.theme-3 {
					top: 1120rpx;
					left: 40rpx;
					right: 40rpx;
					width: auto;
					height: 72rpx;
					font-size: 32rpx;
					text-align: left;
					color: #fff;
					font-weight: 500;
				}

				&.theme-content-3 {
					top: 1170rpx;
					left: 40rpx;
					right: 40rpx;
					width: auto;
					height: 72rpx;
					font-size: 32rpx;
					text-align: left;
					color: #fff;
					font-weight: 500;
				}
			}

			.content-textarea {
				width: 420rpx;
				height: 240rpx;
				position: absolute;
				left: 160rpx;
				top: 680rpx;
				background-color: transparent;
				font-size: 26rpx;
				color: #AF6D33;
				font-weight: 500;
				line-height: 1.8;

				&.theme-2 {
					top: 980rpx;
					left: 80rpx;
					right: 80rpx;
					width: auto;
					height: 120rpx;
					font-size: 32rpx;
					text-align: center;
					color: #FFD88C;
					line-height: 1.5;
				}
			}

			.bottom-person-input {
				width: 320rpx;
				height: 60rpx;
				position: absolute;
				right: 172rpx;
				top: 920rpx;
				background-color: transparent;
				font-size: 26rpx;
				color: #AF6D33;
				font-weight: 500;
				text-align: right;
			}

			.bottom-person-input-theme-3 {
				position: absolute;
				left: 40rpx;
				right: 40rpx;
				bottom: 60rpx;
				background-color: transparent;
				width: auto;
				height: 50rpx;
				font-size: 24rpx;
				text-align: left;
				color: rgba(255, 255, 255, 0.69);
				font-weight: 500;
			}

			.bottom-date-input-theme-3 {
				position: absolute;
				left: 40rpx;
				right: 40rpx;
				bottom: 25rpx;
				background-color: transparent;
				width: auto;
				height: 50rpx;
				font-size: 24rpx;
				text-align: left;
				color: rgba(255, 255, 255, 0.69);
				font-weight: 500;
			}

			.bottom-date-input {
				width: 320rpx;
				height: 60rpx;
				position: absolute;
				right: 172rpx;
				top: 956rpx;
				background-color: transparent;
				font-size: 24rpx;
				color: #AF6D33;
				font-weight: 500;
				text-align: right;
			}

			.placeholderStyle {
				color: #999;
			}
		}

		.custom-item {
			margin: 20px;

			.title {
				display: flex;
				align-items: center;
				font-size: 14px;
				color: rgba(0, 0, 0, 0.8);

				.example {
					font-size: 12px;
					margin-left: 10px;
					color: #c80802;
					font-weight: 500;
				}
			}

			.placeholder-style {
				color: #ddd;
			}

			.custom-input {
				height: 38px;
				line-height: 38px;
				padding: 0 10px;
				box-sizing: border-box;
				font-size: 14px;
				color: #666;
				background-color: #fff;
				border-radius: 4px;
				margin-top: 10px;
				border: 1px solid rgba(0, 0, 0, 0.05);
			}

			.type-radio-group {
				margin-top: 10px;
			}
		}

		.submit-btn {
			margin: 40rpx 30rpx;
			border: none;
			background-color: #c80802;
			color: #fff;
			font-size: 30rpx;
			height: 88rpx;
			line-height: 88rpx;

			&:active {
				background-color: #AF0500;
			}
		}

		.custom-btn {
			margin: 40rpx 30rpx;
			border: 1px solid #c80802;
			background-color: transparent;
			color: #c80802;
			font-size: 30rpx;
			height: 88rpx;
			line-height: 88rpx;
		}

		.share-box {
			position: fixed;
			right: 0px;
			top: 140rpx;
			border-top-left-radius: 12rpx;
			border-bottom-left-radius: 12rpx;
			border-top-right-radius: 0px;
			border-bottom-right-radius: 0px;
			background-color: #E4AE44;
			box-sizing: border-box;
			color: #fff;
			font-weight: 500;
			font-size: 28rpx;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
			line-height: unset;
			border: none;
			z-index: 99;
			padding: 12rpx 20rpx;
			text-align: center;
		}
	}
</style>
